<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ORS Data Visualization</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src='jsPdf/libs/Blob.js/Blob.js' type='text/javascript'></script>
<script src='jsPdf/libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
<script src='jsPdf/libs/png_support/zlib.js' type='text/javascript'></script>
<script src='jsPdf/libs/png_support/png.js' type='text/javascript'></script>
<script src='jsPdf/libs/deflate.js' type='text/javascript'></script>
<script src='jsPdf/jspdf.js' type='text/javascript'></script>
<script src='jsPdf/html2canvas.js' type='text/javascript'></script>
<script src='jsPdf/html2canvas.svg.js' type='text/javascript'></script>
<script src='jsPdf/jspdf.plugin.addimage.js' type='text/javascript'></script>
<script src='jsPdf/jspdf.plugin.png_support.js' type='text/javascript'></script>
<script type="text/javascript" src="jsPdf/canvg.js"></script>
<script type="text/javascript" src="jsPdf/rgbcolor.js"></script>
<script type="text/javascript" src="jsPdf/StackBlur.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/chart.css" rel="stylesheet">
 <script src="js/bootstrap.min.js"></script>
<script src="js/physical.js"></script>
<script src="js/ORSDBNavbar.js"></script>
<style>

.show {
 display: block;
}
.hide {

display: none;
}
 .right-text {
   text-align: right;
 }
</style>
</head>
<body>


<div class="ORSDBNavbar"></div>
	<div class="container-fluid">
		<b>Physical Requirement : </b> 
		<select id="phyReq" name="phyReq"
			class="input-small" onclick="createUserJsObject.ShowPrivileges();">
		<option value="0"> select a physical requirement </option>
		<option value="1" id="Auditory">Auditory/Visual</option>
		<option value="2" id="Exertion">Exertion</option>
		<option value="3" id="Postural">Postural</option>
		<option value="4" id="Reaching/Manipulation">Reaching/Manipulation</option>
	</select>

	<button id="btnExport">Create PDF</button>
	<br>

	<div>
		<b> <span class="newTitle"></span> Options :
		</b>

		<div id="resources" class="hide">
			<select id="selPhyRequirment"  class="selPhyRquirementClass">
				<option value="0">Select Auditory/Visual Requirement</option>
				<option value="1">Communicate Verbally</option>
				<option value="2">Driving</option>
				<option value="3">Hear Telephone</option>
				<option value="4">Hear Group</option>
				<option value="5">Hear One/Both</option>
				<option value="6">Hear other sounds</option>
				<option value="7">Hearing Test</option>
				<option value="8">Far Vision</option>
				<option value="9">Near Vision</option>
				<option value="10">Peripheral Vision</option>
			</select> <font color="red">*</font>
		</div>

		<div id="resources2" class="hide">
			<select id="selPhyRequirment2"  class="selPhyRquirementClass">
				<option value="0">Select Exertion Requirement</option>
				<option value="1">Push/Pull</option>
				<option value="2">Lift/Carry</option>

			</select> <font color="red">*</font>
		</div>
		<div id="resources3" class="hide">
			<select id="selPhyRequirment3" class="selPhyRquirementClass">
				<option value="0">Select Postural Requirement</option>
				<option value="1">Climb Stairs</option>
				<option value="2">Crawling</option>
				<option value="3">Crouching</option>
				<option value="4">Kneeling</option>
				<option value="5">Stooping</option>
			</select> <font color="red">*</font>
		</div>

		<div id="resources4" class="hide">
			<select id="selPhyRequirment4"  class="selPhyRquirementClass">
				<option value="0">Select Reaching/Manipulation Requirement</option>
				<option value="1">Fine Manipulation</option>
				<option value="2">Gross Manipulation</option>
				<option value="3">Foot/Leg Controls</option>
				<option value="4">Reaching Overhead/Below Shoulders</option>
				<option value="5">Keyboarding(Touch,10Key,Type)</option>
			</select> <font color="red">*</font>
		</div>
	</div>

	<div class="row no-gutters">

<div id="barChart" class="col-md-6">
			<div class="panel panel-primary chart-panel">
				<div class="panel-heading">
					<span id="barChartSpan" class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
						<span id="barChartPdf" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
					
				<h2 class="panel-title" style="font-size: 14px">Incidence of Requirements by Occupational Group</h2>
			</div>
			<br>
			<div>
				<b> &nbsp;&nbsp; Choose Incidence of Occurrence:</b> <select
					id="incidenceOfOccurance" class="input-small" autocomplete="off">
					<option value="0"></option>
					<option value="1">Not Present  (0%)</option>
					<option value="2">Almost never (0% - 25%)</option>
					<option value="3">Occasionally (25% - 50%)</option>
					<option value="4">Constantly   (50% - 75%)</option>
					<option value="5">Frequently   (75% - 100%)</option>
					<option value="6">Unknown</option>
				</select>
			</div>
			<div class="panel-body">
				<div id="Phys_env_BarChart_div"
					style="width: 650px; height: 380px;"></div>
				</div>
			</div>
		</div>

		<div id="table1" class="col-md-6" >
			<div class="panel panel-primary chart-panel">
				<div class="panel-heading">
<span id="tableSpan" class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
<span id="stackColumnChartPdf" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
<span id="stacked" class="pull-right clickable" style="padding-right:20px"><i class="glyphicon glyphicon-stats"></i></span>
<h2 class="panel-title" style="font-size: 14px">Percentage of employees working by Occupational group and Physical Requirement</h2>
			</div>
			<div class="panel-body">
			<b>Percentage of employees working where <span class="title"></span> is required by occupational group</b>
			<br>
				<div id="table_div" style="width: 650px; height: 400px;"></div>
			</div>
		</div>
	</div>
</div>

<div class="row no-gutters">
	<div id="table2" class="col-md-6">
		<div class="panel panel-primary chart-panel">
			<div class="panel-heading">
				<span id="table2Span" class="pull-right clickable"><i
					class="glyphicon glyphicon-chevron-up"></i></span>
					<span id="overHeadTablePdf" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
					
				<h2 class="panel-title" style="font-size: 14px"> These occupations requires physical Requirements <span id="change"></span></h2>
			</div>
			<div class="panel-body">
			<div>
			<b>Please Choose here for Percentage Range </b> &nbsp; <select id="range" style="width: 250px" onchange="displayDataOnChangeOfCondition(this.value)" >
			<option value="3" >(50 % - 75 %)</option>
			<option value="1" >(0 % - 25 %)</option>
			<option value="2" >(25 % - 50 %)</option>
			<option value="4" >(75 % - 100 %)</option>
			</select>
			</div>
				<br>
		<div id="overheadTableData">
				<b>Selected occupations which requires <span class="title"></span> with in % range <span id="percentRange">(50% - 75%)</span></b>
					<br>
				<div id="overHead" style="width: 650px; height: 380px;"></div>
						</div>	
					</div>
				</div>
			</div>
			<div id="tablePdfImage"></div>
			
			<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"> Occupations <span id="change"></span> Requiring <span class="title"></span> </h4>
            </div>
            <div class="modal-body">
             <div id="Popup_BarChart_div" style="width: 200px; height: 410px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
			
			<div id="columnCharts" class="col-md-6">
				<div class="panel panel-primary chart-panel">
					<div class="panel-heading">
						<span id="columnChartsSpan" class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
					<span id="" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
				<h2 class="panel-title" style="font-size: 14px" >
					Amount of <span class="title"></span> typically required by Occupation
				</h2>
			</div>
			<div class="panel-body">
				<div class="row no-gutters">
					<div class="col-md-4">

						<div id="physEnv_ColumnChart_div1"
							style="width: 200px; height: 410px;"></div>
						<div>
							<select id="selOccRequirment" style="width: 150px" autocomplete="off">
								<option value="0"></option>
								<option value="1">Architechture and Engineering</option>
								<option value="2">Management, professional, and
									related</option>
								<option value="3">Management, business, and financial</option>
								<option value="4">Professional and related</option>
								<option value="5">Teachers</option>
								<option value="6">Primary, secondary,and special
									education school teachers</option>
								<option value="7">Registered nurses</option>
								<option value="8">Service</option>
								<option value="9">Protective service</option>
								<option value="10">Sales and office</option>
								<option value="11">Sales and related</option>
								<option value="12">Office and administrative support</option>
								<option value="13">Natural resources,
									construction,and maintenance</option>
								<option value="14">Construction, extraction,
									farming,fishing, and forestry</option>
								<option value="15">Installation, maintenance, and
									repair</option>
								<option value="16">Production, transportation,and
									material moving</option>
								<option value="17">Production</option>
								<option value="18">Transportation and material moving</option>

							</select>
						</div>
					</div>


					<div class="col-md-4">


						<div id="physEnv_ColumnChart_div2"
							style="width: 200px; height: 410px;"></div>
						<div>
							<select id="selOccRequirment" style="width: 150px">
								<option value="0"></option>
								<option value="1">Architechture and Engineering</option>
								<option value="2">Management, professional, and
									related</option>
								<option value="3">Management, business, and financial</option>
								<option value="4">Professional and related</option>
								<option value="5">Teachers</option>
								<option value="6">Primary, secondary,and special
									education school teachers</option>
								<option value="7">Registered nurses</option>
								<option value="8">Service</option>
								<option value="9">Protective service</option>
								<option value="10">Sales and office</option>
								<option value="11">Sales and related</option>
								<option value="12">Office and administrative support</option>
								<option value="13">Natural resources,
									construction,and maintenance</option>
								<option value="14">Construction, extraction,
									farming,fishing, and forestry</option>
								<option value="15">Installation, maintenance, and
									repair</option>
								<option value="16">Production, transportation,and
									material moving</option>
								<option value="17">Production</option>
								<option value="18">Transportation and material moving</option>

							</select>
						</div>
					</div>


					<div class="col-md-4">


						<div id="physEnv_ColumnChart_div3"
							style="width: 200px; height: 410px;"></div>
						<div>
							<select id="selOccRequirment" style="width: 150px">
										<option value="0"></option>
										<option value="1">Architechture and Engineering</option>
										<option value="2">Management, professional, and
											related</option>
										<option value="3">Management, business, and financial</option>
										<option value="4">Professional and related</option>
										<option value="5">Teachers</option>
										<option value="6">Primary, secondary,and special
											education school teachers</option>
										<option value="7">Registered nurses</option>
										<option value="8">Service</option>
										<option value="9">Protective service</option>
										<option value="10">Sales and office</option>
										<option value="11">Sales and related</option>
										<option value="12">Office and administrative support</option>
										<option value="13">Natural resources,
											construction,and maintenance</option>
										<option value="14">Construction, extraction,
											farming,fishing, and forestry</option>
										<option value="15">Installation, maintenance, and
											repair</option>
										<option value="16">Production, transportation,and
											material moving</option>
										<option value="17">Production</option>
										<option value="18">Transportation and material moving</option>

									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</body>
</html>